import React, { useEffect, useState } from 'react';
// @ts-ignore
import EchartsComp from './echarts.js';
import { IPickerType, IPointerType } from '../../type';
import { getDate, TIME_ENUM, ToFixed } from '../../tool';
import styles from './index.less';
import moment from 'moment';

interface IProps {
  /**
   * 图表数据
   */
  data: any;
  /**
   * 类型
   */
  type: IPickerType;
  /**
   * 开始时间
   */
  startDate?: string;
  /**
   * 结束时间
   */
  endDate?: string;
  /**
   *当前选中的时间
   */
  date?: string;
  /**
   * 当前日期图表选择的点数
   */
  pointNum?: IPointerType;
}

const Charts = (props: IProps) => {
  const {
    data,
    type,
    date = moment(new Date()).format('YYYY-MM-DD'),
    pointNum = IPointerType.TWENTY_FOUR_POINT,
    startDate = moment().format('YYYY-MM-DD'),
    endDate = moment().format('YYYY-MM-DD'),
  } = props;
  const [nowData, setNowData] = useState<any>();

  // 计算最大值
  const calMax = (arr: any) => {
    const max = Math.max(...arr);
    if (0 < max && max < 10) {
      return Math.ceil(max);
    } else {
      const maxint = Math.ceil(max / 9.5);
      let maxval = maxint * 10;
      if (maxval == 0 || max < 0) {
        maxval = 0;
      }
      return maxval;
    }
  };

  // 计算最小值
  const calMin = (arr: any) => {
    const min = Math.min(...arr);
    if (0 > min && min > -10) {
      return Math.floor(min);
    } else {
      const minint = Math.floor(min / 10);
      const minval = minint * 10;
      return minval;
    }
  };

  // 获取options
  const getOption = (_data: any) => {
    let xAxisData = Object.keys(_data);
    if (type === IPickerType.MONTH) {
      xAxisData = getDate(date, startDate, endDate);
    } else {
      xAxisData = TIME_ENUM(pointNum);
    }
    const quantityArr = Object.values(_data).map((item: any) =>
      item?.quantity ? ToFixed(item.quantity, 3) : 0,
    );
    const priceArr = Object.values(_data).map((item: any) =>
      item?.price ? ToFixed(item.price, 2) : 0,
    );
    const quantityMax = calMax(quantityArr);
    const quantityMin = calMin(quantityArr) > 0 ? 0 : calMin(quantityArr);
    const priceMax = calMax(priceArr);
    const priceMin = calMin(priceArr) > 0 ? 0 : calMin(priceArr);
    const _option = {
      grid: {
        left: 20,
        top: 40,
        right: 20,
        bottom: 45,
        containLabel: true,
      },
      legend: {
        right: 'center',
        top: 'bottom',
        padding: [20, 0, 28, 0],
        itemGap: 20,
        itemWidth: 15,
        itemHeight: 8,
        textStyle: {
          color: '#D3D4D4',
        },
        data: [
          { name: '电量' },
          {
            name: '电价',
            itemStyle: { opacity: 1, borderWidth: 1, borderColor: '#F5BE15', color: '#222629' },
          },
        ],
      },
      tooltip: {
        trigger: 'axis',
        padding: 12,
        show: true,
        backgroundColor: '#161A1D',
        borderColor: '#161A1D',
        textStyle: {
          color: '#A7A8A9',
          fontSize: 12,
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xAxisData,
        axisTick: {
          alignWithLabel: true,
        },
        splitNumber: Math.random(),
      },
      yAxis: [
        {
          type: 'value',
          name: '电价(元/MWh)',
          min: priceMin,
          max: priceMax,
          splitNumber: 4,
          interval: (priceMax - priceMin) / 4,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: '#4E5154',
            },
          },
        },
        {
          type: 'value',
          name: '电量(MWh)',
          min: quantityMin,
          max: quantityMax,
          splitNumber: 4,
          interval: (quantityMax - quantityMin) / 4,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: '#4E5154',
            },
          },
        },
      ],
      series:
        quantityArr.length === 1
          ? [
              {
                name: '电价',
                type: 'line',
                symbol: 'none',
                data: priceArr,
                color: '#F5BE15',
                lineStyle: { width: 1 },
              },
              {
                name: '电量',
                type: 'bar',
                data: quantityArr,
                color: '#5B8FF966',
                yAxisIndex: 1,
                barCategoryGap: 0,
              },
            ]
          : [
              {
                name: '电价',
                type: 'line',
                symbol: 'none',
                data: priceArr,
                color: '#F5BE15',
                lineStyle: { width: 1 },
              },
              {
                name: '电量',
                type: 'line',
                symbol: 'none',
                data: quantityArr,
                color: '#5B8FF966',
                yAxisIndex: 1,
                step: 'start',
                areaStyle: {},
                lineStyle: { width: 0, color: '#222629' },
              },
            ],
    };
    return _option;
  };

  useEffect(() => {
    if (data) {
      const _option = getOption(data);
      setNowData(_option);
    }
  }, [data]);

  return (
    <div className={styles.container}>{nowData ? <EchartsComp config={nowData} /> : null}</div>
  );
};

export default Charts;
